/**
 * @Author:周邱艳
 * @Date:2020/6/30
 * @Description:这是成分产品持仓占比可视化
 */
import React,{Component} from "react";
import {Card} from "antd";
import ReactEcharts from "echarts-for-react";
import axios from "axios";
import {URL} from '../../../index'

export default class ProductPorpotion extends Component{
    //返回图的配置对象
    constructor(props) {
        super(props);
        this.state={
            products:[],//总表
            names:[],//数据
            uptitle:[]//表名
        }
        this.getCategorys=this.getCategorys.bind(this)
    }
    getCategorys = () => {
        //数据请求
        axios({
            method:"GET",
            url:"http://39.101.141.248:9527/proYields/proYieldByCombinationId",
           params:{comBaseId:this.props.fathercomBaseId}
        }).then(
            (res) => {
                //状态码判断
                if(res.data.code===200){
                    var names = [];//初始化数据
                    var uptitle=[]//初始化小标识名
                    for (let i=0;i<res.data.products.length;i++){
                        var name=res.data.products[i]["proName"]
                        var value=res.data.products[i]["comShareRadio"]
                        //数据合成
                        names.push({value,name})
                        //标识名合成
                        uptitle.push(name)
                    }
                    //数据更新
                    this.setState({
                        products: res.data.products,
                        names:names,
                        uptitle:uptitle
                    })
                    //状态码判断
                }

            }
        ).catch(function (error) {//异常处理
            console.log(error);
        })
    }
    //组件挂载后
    componentDidMount() {
        this.getCategorys()
    }
    //echarts可视化
    getOption1=()=>{
        return{
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: this.state.uptitle//小标识名
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: this.state.names,//数据
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }

                    }
                }
            ]
        };

    }
    //数据渲染
    render() {

        return(
            <div>
                <Card>
                    <ReactEcharts option={this.getOption1()} style={{height: 300}}/>
                </Card>
            </div>
        )
    }
}
